<template>
  <div class="card h-full flex flex-col">
    <div class="relative overflow-hidden rounded-t-lg h-48">
      <img
        v-if="post.image"
        :src="post.image.startsWith('http') ? post.image : baseUrl + post.image"
        :alt="post.title"
        class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
      />
      <div
        v-else
        class="w-full h-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center"
      >
        <i class="pi pi-image text-4xl text-gray-400"></i>
      </div>
      <div
        class="absolute top-0 right-0 bg-primary text-white text-xs font-medium px-2 py-1 m-2 rounded"
      >
        {{ formatDate(post.create_time) }}
      </div>
    </div>
    <div class="p-5 flex-grow flex flex-col">
      <div
        v-if="post.tags && post.tags.length > 0"
        class="flex flex-wrap gap-2 mb-3"
      >
        <span v-for="tag in post.tags" :key="tag" class="tech-badge">
          {{ tag }}
        </span>
      </div>
      <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">
        {{ post.title }}
      </h3>
      <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow line-clamp-3">
        {{ post.excerpt }}
      </p>
      <div
        class="flex justify-between items-center mt-auto pt-4 border-t border-gray-200 dark:border-gray-700"
      >
        <span
          class="text-sm text-gray-500 dark:text-gray-400 flex items-center"
        >
          <i class="pi pi-clock mr-1"></i> {{ post.readTime }} 分钟阅读
        </span>
        <router-link
          :to="{ name: 'blog-detail', params: { id: post.id } }"
          class="text-primary dark:text-code-accent font-medium hover:underline inline-flex items-center"
        >
          阅读全文
          <i class="pi pi-arrow-right ml-1"></i>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BlogPostCard",
  props: {
    post: {
      type: Object,
      required: true,
    },
  },
  setup() {
    const formatDate = (timestamp) => {
      if (!timestamp) return "";
      // 处理时间戳格式（秒级）
      const date = new Date(timestamp * 1000);
      return date.toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "short",
        day: "numeric",
      });
    };

    return {
      formatDate,
      baseUrl: import.meta.env.VITE_staticHost || "",
    };
  },
};
</script>

<style scoped>
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
